<template>
    <div style="margin-top: 75px">
        <h3>今年各月前 10 热销车辆</h3>
        <div v-for="(tableData,index) in tableDatas" style="margin-top: 75px">
            <el-row>
                <el-col :offset="2">
                    <h3><span v-text="Number(tableData.name.split('-')[1])"></span> 月的统计数据</h3>
                </el-col>

                <el-table
                        :data="tableData.data"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="排名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="车系"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="brand"
                            label="品牌"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="sale"
                            label="销量">
                    </el-table-column>
                </el-table>
            </el-row>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                thisMonth: new Date().getMonth(),
                tableDatas: [],
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                this.$http({
                    url: this.$http.adornUrl(this.$route.meta['url']),
                    method: 'get',
                }).then(form => {
                    if (form.data.status == "0") {
                        let data = form.data;
                        let series = data.series.reverse();
                        this.tableDatas = series;
                    } else {
                        this.$message("数据有误，请等待管理员处理");
                    }
                });
            },
        },
    }
</script>

<style scoped>

</style>